$borderColor: #2c2c3e;
$bgColor: #000;

.trade_all {
  width: 100%;
  background: $bgColor;
  color: #fff;
}

.trade_main {
  margin-top: 65px;
  // background: red;
  background: $bgColor;

}

.content_box {
  flex-wrap: nowrap;

  >div {
    height: 930px;
  }

  .content_l {
    width: 300px;
  }

  .content_r {
    width: 300px;
    flex-shrink: 0;
    border-left: 1px solid $borderColor;
    //  background:yellow ;
  }
}

.order_details_box {
  border-top: 1px solid $borderColor;
  padding: 0 20px;
  margin-bottom: 200px;

  .in_tabs_box {

    margin-top: 10px;

    .in_tabs_inner {
      ::v-deep .el-tabs {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .el-tabs__nav-wrap::after {
          height: 0;
        }

        .el-tabs__active-bar {
          display: none;
        }
      }
    }
  }

  .table_content {
    // margin-top: 30px;
  }
}


.coin_header {
  width: 100%;
  padding-left: 30px;
  box-sizing: border-box;
  background-color: #1A1B24;
  color: #fff;

  >div {
    height: 100%;
  }

  .coin_nam {
    // flex:1;
    width: 105px;
    font-size: 20px;
  }

  .gap_line_box {
    width: 65px;

    .gap_liine {
      width: 1px;
      height: 50px;
      background: #bebebe;
    }
  }

  .coin_detail {

    // gap:50px;
    .coin_detail_item {
      width: 120px;
      height: 40px;
    }

    .eight-color {
      color: #888;
    }
  }
}


.left_container {
  // width: 310px;
  flex: 1.1;
  // background: red;
  border-right: 1px solid $borderColor;
}

.right_container {
  flex: 2.5;
  padding: 0 15px;

  // background: salmon;
  .kline_box {
    width: 100%;
    height: 447px;
    border-bottom: 1px solid $borderColor;
    // background: aqua;
  }

}

//底部操作
.operate_box {
  padding: 10px;

  //common css
  .canUse_box {
    width: 100%;
    height: 30px;
    font-size: 12px;

    .canUse_l {
      gap: 20px;
    }
  }

  .btn_box {
    width: 100%;
    height: 50px;
    margin-top: 10px;

    .btn_box_item {
      width: 100%;
      height: 100%;
      border-radius: 5px;
      color: #fff;

    }

    .seeRise_box_btn {
      background: #00f0ff;
      color: #333;
    }

    .seeFall_box_btn {
      background-color: #ff4814;
    }

  }

  .tab_box {
    ::v-deep .el-select {
      width: 100px;

      .el-input__prefix,
      .el-input__suffix {
        height: 42px;
        line-height: 42px;
      }
    }
  }


  //币币交易
  .spot_content {
    gap: 20px;

    .l_content_item,
    .r_content_item {
      flex: 1;

      ::v-deep .el-input {
        margin-bottom: 10px;

        .el-input__inner {
          height: 42px;
          line-height: 42px;
          text-align: right;
          padding: 0 40px !important;
          background-color: #000;
          border-color: #2c2c3e;
          color: #fff;

        }

        .el-input__prefix,
        .el-input__suffix {
          height: 42px;
          line-height: 42px;
          font-size: 12px;
        }
      }
    }

  }






  //秒合约
  .top_seconds {
    width: 100%;
    height: 70px;
    overflow: hidden;
    margin-top: 20px;
    box-sizing: border-box;
    color: #fff;

    // background: red;
    ul {
      gap: 20px;

      li {
        width: 100px;
        height: 70px;
        text-align: center;
        border: 1px solid #2c2c3e;
        box-sizing: border-box;

        &:hover {
          background: #00f0ff;
          color: #333;
          cursor: pointer;
        }
      }

      .active_second {
        background: #00f0ff;
        color: #333;
      }
    }
  }

  .bottom_input {
    gap: 20px;
    // padding: 10px;
    box-sizing: border-box;

    ::v-deep .el-input {

      .el-input__inner {
        height: 40px;
        background-color: #000;
        border-color: #2c2c3e;
        color: #fff;
      }

      .el-input-group__append {
        background-color: transparent;
        border-color: #2c2c3e;
      }
    }

    // >div{
    //   flex:1;
    //   //background: blue;
    // }
    .bottom_input_item {
      flex: 1;

      .input_header {
        margin-top: 20px;
      }

      .select_box {

        //background-color: #536FFF;
        .select_box_inner {
          width: 100%;
          height: 60px;

          // gap:20px;
          .select_box_item {
            width: 90px;
            height: 30px;
            font-size: 12px;
            border: 1px solid #2c2c3e;

            &:hover {
              background: #00f0ff;
              color: #333;
              cursor: pointer;
            }
          }

          .active_rise,
          .active_fall {
            background: #00f0ff;
            color: #333;
          }
        }

      }


    }

  }
}

.transfer-box {
  text-align: center;
}



.el-dropdown-menu {
  .el-dropdown-menu__item {
    width: 100px;
  }
}

.exchange-depths {
  .exchange-depth-top {
    height: 40px;
    line-height: 40px;
    padding-bottom: 0;
    border-bottom: 1px solid #F1F1F1;
    border-radius: 0;
    box-shadow: none;
    justify-content: space-between;
    padding: 0 12px;

    .depth-type-taps {
      color: #fff;
      height: 34px;
      box-sizing: border-box;
      padding: 5px 8px;
      cursor: pointer;
      border-radius: 4px;
      margin-right: 4px;
      display: flex;
      justify-content: center;
      align-items: center;

      /*  &.active {
          background-color: #f5f6fa;
        }
        &:hover {
          background-color: #f5f6fa;
        } */
      img {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
        font-size: 18px;
        border-style: none;
      }
    }

    .el-dropdown-link {
      cursor: pointer;
      color: #fff;
    }
  }

  .exchange-depth-content {
    .depth-row {
      font-size: 12px;
      line-height: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      white-space: nowrap;
      position: relative;
      z-index: 2;
      box-sizing: border-box;
      margin-bottom: 4.5px;
      padding: 4px 12px 0px;
    }

    .depth-row__item {
      position: relative;
      z-index: 1;

      &:first-of-type {
        width: 76px;
        margin-right: 4px;
      }

      &:nth-of-type(2) {
        text-align: right;
        width: 90px;
        margin-right: 4px;
      }

      &:nth-of-type(3) {
        text-align: right;
        flex: 1;
      }
    }

    .depth-box {
      overflow: hidden;

      &.depth-rise {
        li {
          background-image: linear-gradient(rgba(223, 41, 74, 0.2),
              rgba(223, 41, 74, 0.2));

        }
      }

      &.depth-fall {
        li {
          background-image: linear-gradient(rgba(46, 189, 133, 0.2),
              rgba(46, 189, 133, 0.2));
        }
      }

      li {
        background-position: 100%;
        background-repeat: no-repeat;
        height: 25px;
        line-height: 25px;
        display: flex;
        align-items: center;
        border-top: 1px dashed transparent;
        border-bottom: 1px dashed transparent;
        cursor: pointer;
        transition: 0.5s;

        &>span {
          font-size: 12px;
          line-height: 18px;

          &:first-of-type {
            width: 88px;
            margin-right: 4px;
            padding-left: 12px;
            box-sizing: border-box;
            position: relative;
          }

          &:nth-of-type(2) {
            width: 90px;
            text-align: right;
            margin-right: 4px;
          }

          &:last-of-type {
            flex: 1;
            text-align: right;
            box-sizing: border-box;
            padding-right: 12px;
          }
        }
      }
    }

    .exchange-depth-ticker {
      width: 100%;
      border-top: 1px solid #F1F1F1;
      border-bottom: 1px solid #F1F1F1;
      height: 58px;
      padding-bottom: 0;
      border-radius: 0;
      box-shadow: none;

      div {
        padding-left: 12px;

        span {
          &:nth-child(1) {
            font-size: 24px;

            i {
              font-size: 24px;
            }
          }

          &:nth-child(2) {
            font-size: 14px;
            line-height: 20px;
            margin-left: 8px;
          }
        }
      }
    }
  }
}

.top_quotes {
  width: 100%;
  height: 474px;

  //  background: red;
  .header_search {
    width: 100%;
    height: 60px;
    padding: 0 20px;
    box-sizing: border-box;

    ::v-deep .el-input {
      width: 200px;

      .el-input__inner {
        width: 200px;
        height: 32px;
        background-color: #000;
        border-color: #2c2c3e;
        color: #fff;
      }

      .el-input-group__prepend {
        background-color: transparent;
        border-color: #2c2c3e;

      }
    }
  }

  .quotes_box {


    .content-data {
      height: 360px;
      overflow-y: auto;
      padding: 0 20px;
      box-sizing: border-box;
      border-bottom: 1px solid $borderColor;

      ul {

        // overflow: auto; 
        li {
          height: 60px;
          font-size: 12px;
        }
      }
    }
  }
}

.bottom_deal {
  width: 100%;
  padding: 0 5px;
  box-sizing: border-box;

  .title {
    width: 68px;
    padding-bottom: 5px;
    color: #00f0ff;
    padding-left: 5px;
    border-bottom: 2px solid #00f0ff;
    font-size: 14px;
  }

  .tabs_box {
    padding: 10px 0 0 10px;

  }

  .deal_list {
    width: 100%;
    height: 400px;
    overflow: hidden;
    padding: 10px 0 0 10px;


    ul {
      li {
        font-size: 12px;
        gap: 10px;
        height: 30px;

        div {
          // width:40px;

        }

        .time {
          width: 70px;
          text-align: left;
        }

        .direction {
          width: 60px;
        }

        .price {
          width: 70px;
        }

        .count {
          width: 110px;
          text-align: right;
        }
      }
    }
  }
}

.custom-dropdown {
  background: #1B1B1D;
  box-shadow: 1px 2px 6px #0000007d;
  border-radius: 4px;
  border: none;

  .el-dropdown-menu__item {
    color: #fff;

  }

  .el-dropdown-menu__item:hover {
    background-color: #00f0ff !important;
    color: #303030 !important;
  }
}

.fit-tc-tip {
  padding: 0 10px;
  overflow: hidden;
  ::v-deep .el-tabs__item {
    font-size: 14px;
    overflow: hidden;
  }
}

.el-select {
  ::v-deep .el-input__inner {
    background-color: #000;
    border-color: #2c2c3e;
    color: #fff;
  }
}

.my-select{
  background-color: #000;
 ::v-deep .el-select-dropdown__empty{
    background-color: #000;
    color: #fff;
  }
}

.content-tabs{
  width: 100%;
}